import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Modal, Form, Input, RadioUpload, Button, message,Icon, TreeSelect, Select } from 'antd';
import { baseUrl } from '../../config/system';
const TreeNode = TreeSelect.TreeNode;
const FormItem = Form.Item;
const Option = Select.Option;
var aa=[];

class PresetModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList: [],
    };
  }

  okHandler = () => {
     const { onOk } = this.props;
     this.props.form.validateFields((err, values) => {
      if (!err) {
        // var formData = new FormData();
        //    formData.append('file', aa[0].files[0]);

        onOk(values);
        this.props.form.resetFields();
      }
     });
  };

   uploadExecl = (data) => {
     const { uploadExecl } = this.props;
      uploadExecl(data);
  };

  render() {
    const { children, user, dispatch,roomList, item, contractList, } = this.props;
    const { getFieldDecorator,resetFields,getFieldProps,getFieldValue,setFieldsValue  } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    const loopRoom = data => data.map((item) => {
      return <Option key={item.id_ + ''}>{item.name}</Option>
    });

    const loopContract = data => data.map((item) => {
      return <Option key={item.id_ + ''}>{item.name}</Option>
    });

    const props = {
      name: 'file',
      beforeUpload(file) {
        const isJPG = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        if (!isJPG) {
          message.error('只能上传EXCEL文件！');
        }
        let fildsValue = {}
        let fileList=[]
        fileList.push(file);
        fildsValue['file'] = fileList;
       aa=fileList;
       console.log(aa);
        setFieldsValue(fildsValue);
        return false;
      },
    };

    return (
      <span>
        <Modal
                maskClosable= {this.props.maskClosable}
                confirmLoading= {this.props.confirmLoading}
                title={this.props.title}
                visible={this.props.visible}
                onOk={this.okHandler}
                onCancel={this.props.onCancel}
                key={this.props.newKey}
        >
          <Form layout='horizontal' onSubmit={this.okHandler}>
            <FormItem style={{marginBottom:'0px'}}>
              {getFieldDecorator('id',{initialValue:item.id_})(
                <Input type="hidden"/>
              )}
            </FormItem>
            <FormItem
                  {...formItemLayout}
                  label="合同号"
                  hasFeedback
                >
                  {
                    getFieldDecorator('contractNo', {
                      initialValue: item.contractNo
                    })(
                      <Select
                        showSearch
                        allowClear
                        placeholder="请选择合同号"
                      >
                        {loopContract(contractList)}
                      </Select>
                    )
                  }
            </FormItem>
            <FormItem
                  {...formItemLayout}
                  label="供应商"
                  hasFeedback
                >
                  {
                    getFieldDecorator('supplier', {
                      initialValue: item.supplier,
                      rules: [{
                        required: true, whitespace: true, message: '请输入供应商',
                      },{ max: 30, message: '供应商 30 字符以内' }]
                    })(<Input />)
                  }
            </FormItem>
            <FormItem
                  {...formItemLayout}
                  label="联系人"
                  hasFeedback
                >
                  {
                    getFieldDecorator('contacts', {
                      initialValue: item.contacts,
                      rules: [{
                        required: true, whitespace: true, message: '请输入联系人',
                      },{ max: 30, message: '联系人 30 字符以内' },]
                    })(<Input />)
                  }
            </FormItem>
            <FormItem
                  {...formItemLayout}
                  label="联系电话"
                  hasFeedback
                >
                  {
                    getFieldDecorator('contactsPhone', {
                      initialValue: item.contactsPhone,
                      rules: [{
                        required: true, whitespace: true, message: '请输入联系电话',
                      },{ max: 20, message: '联系电话 20 字符以内' },]
                    })(<Input />)
                  }
            </FormItem>

            <FormItem
                  {...formItemLayout}
                  label="所在位置"
                  hasFeedback
                >
                  {
                    getFieldDecorator('roomId', {
                      initialValue: item.roomId_,
                      rules: [{
                        required: true, message: '请选择机房/库房',
                      }]
                    })(
                      <Select
                        showSearch
                        allowClear
                        placeholder="请选择机房/库房"
                      >
                        {loopRoom(roomList)}
                      </Select>
                    )
                  }
            </FormItem>

            {/*<FormItem
              label="EXCEL文件"
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 14 }}
              required
              hasFeedback
            >
            <Upload {...getFieldProps('file',{
              validate: [{
                rules: [
                  { type: "array", required: true, message: '请添加数据文件' },
                ],
                trigger: 'onBlur',
              }],
            },{valuePropName: 'fileIds'})} {...props} fileList={getFieldValue('file')}>
              <Button type="ghost">
                <Icon type="upload" /> 上传附件
              </Button>
            </Upload>
            </FormItem>*/}


          </Form>
        </Modal>
      </span>
    );
  }

}

export default Form.create()(PresetModal)
